<!-- 文章信息管理 -->
<template>
	<div>
	  <!-- 面包屑-->
	  <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 40px;">
	    <el-breadcrumb-item :to="{ path: '/succ' }">首页</el-breadcrumb-item>
	    <el-breadcrumb-item >文章管理</el-breadcrumb-item>
	  </el-breadcrumb>
	
	  <!-- 卡片+按钮-->
	  <el-card class="box-card" shadow="always">
	    <div slot="header" class="clearfix" align="left">
	      <el-button type="primary" plain icon="el-icon-circle-plus-outline" @click="openAddDialog()">新增</el-button>
	      <el-button type="danger" plain icon="el-icon-delete" @click="deleteArticles()">删除</el-button>
	    </div>
	
	    <!-- 表格 @selection-change="handleSelectionChange" 多选选项变化时触发 -->
	    <div class="text item">
	      <el-table ref="multipleTable" :data="tableData"
	        tooltip-effect="dark" style="width: 100%"
	        @selection-change="handleSelectionChange"
	        border :row-class-name="tableRowClassName"
	        max-height="400">
	
	        <el-table-column type="selection" width="55" prop="id">
	        </el-table-column>
	
	        <el-table-column label="序号" type="index" sortable width="55">
	        </el-table-column>
	
	        <el-table-column prop="title" label="文章标题" show-overflow-tooltip>
	
	        </el-table-column>
			
			<el-table-column prop="author" label="作者" show-overflow-tooltip>
				
			</el-table-column>
	
	        <el-table-column prop="nickName" label="操作人" width="80">

	        </el-table-column>
	
	
	        <el-table-column prop="operTime" label="操作时间" sortable show-overflow-tooltip>
	          <template slot-scope="scope">
	            <span v-text="dateFormat(scope.row.operTime)"></span>
	          </template>
	        </el-table-column>
	
	        <el-table-column label="操作" width="150">
	          <!-- 插槽,用来处理表格单元格中的数据 -->
	          <template slot-scope="scope">
	            <el-button size="mini" @click="updateDialog(scope.row.id)">编辑</el-button>
	            <el-button size="mini" type="danger" @click="deleteArticle(scope.row.id)">删除</el-button>
	          </template>
	        </el-table-column>
	      </el-table>
	
	      <!-- 分页组件-->
	      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
	      :current-page="queryInfo.pageNum"
	        :page-sizes="[4, 8, 16,32]"
	        :page-size="queryInfo.pageSize"
	        layout="total, sizes, prev, pager, next, jumper"
	        :total="queryInfo.total">
	      </el-pagination>
	    </div>
	  </el-card>
	
	  <AddDialog ref="addArticle"></AddDialog>
	  <updateDialog ref="updateArticle"></updateDialog>
	</div>
</template>

<script>
  import AddDialog from './addArticle.vue'
  import updateDialog from './updateArticle.vue'
  export default {
    /* 注册导入进来的组件*/
    components: {
      AddDialog,
      updateDialog
    },
    data() {
      return {
        tableData: [],
        queryInfo: {
          pageNum: 1,
          pageSize: 4,
          total: 0,
        },
        //多选选项内容存储区
        ckRows: []
      }
    },
    methods: {
		//批量删除
      deleteArticles() {
        var that = this
        if (this.ckRows.length == 0) {
          that.$message({
            message: '请至少选择一条!!!',
            type: 'warning'
          });
        }else{
          this.$confirm('您确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            var id = "";
            this.ckRows.forEach(function(e){
              id+=e.id+",";
            })
            this.$http.delete("/articleMeg/deleteArticle/" + id).then(function(res) {
              if (res.data.code == 200) {
                that.$message({
                  type: 'success',
                  message: "删除成功!"
                });
                that.getArticles()();
              } else {
                that.$message({
                  type: 'error',
                  message: "删除失败!"
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }

      },
      //单个删除
      deleteArticle(id) {
        var that = this
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$http.delete("/articleMeg/deleteArticle/" + id).then(function(res) {
            if (res.data.code == 200) {
              that.$message({
                type: 'success',
                message: "删除成功!"
              });
              that.getArticles();
            } else {
              that.$message({
                type: 'error',
                message: "删除失败!"
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      openAddDialog(){
        this.$refs.addArticle.dialog = true
      },
      updateDialog(id){
        this.$refs.updateArticle.dialogVisible = true;
        this.$refs.updateArticle.getArticleById(id);
      },
      //重新选择页数大小时触发
      handleSizeChange(val) {
        this.queryInfo.pageSize = val;
        this.getArticles();
      },
      //重新选择页数
      handleCurrentChange(val) {
        this.queryInfo.pageNum = val;
        this.getArticles()
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //多选选项发生变化时触发
      handleSelectionChange(val) {
        this.ckRows = val;
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'success-row';
        }
        return '';
      },
      dateFormat(time) { //时间格式转换
        var date = new Date(time);
        var year = date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month =
          date.getMonth() + 1 < 10 ?
          "0" + (date.getMonth() + 1) :
          date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minute = date.getMinutes() < 10 ? "0" +  date.getMinutes() :  date.getMinutes();
        var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return (
          year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second
        );
      },
      getArticles(){
      	const that = this
      	this.$http.post("/articleMeg/getArticle", this.queryInfo).then(function(res) {
      	  console.log(res)
      	  that.tableData = res.data.articles
      	  that.queryInfo.total = res.data.total
      	})
      },
    },
    created() {
      this.getArticles()
    }
  }
</script>

<style>
  .el-table .success-row {
    background: #f0f9eb;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 25px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: auto;
    height: 600px;
  }
</style>
